class HV {
  constructor(
    dy,
    box,
    der,
    two,
    dsan,
    three,
    dsi,
    four,
    dwu,
    five,
    dliu,
    six,
    nav
  ) {
    this.oLi = dy;
    this.oBox = box;

    this.oDer = der;
    this.oTwo = two;

    this.oDsan = dsan;
    this.oThree = three;

    this.oDsi = dsi;
    this.oFour = four;

    this.oDwu = dwu;
    this.oFive = five;

    this.oDliu = dliu;
    this.oSix = six;

    this.oNav = nav;

    this.mouseover();
    this.mouseout();
  }

  mouseover() {
    let that = this;
    this.oLi.onmouseover = function () {
      that.oBox.style.display = "flex";
    };

    this.oBox.onmouseover = function () {
      this.oBox.style.display = "flex";
    };

    this.oDer.onmouseover = function () {
      that.oTwo.style.display = "flex";
    };

    this.oDsan.onmouseover = function () {
      that.oThree.style.display = "flex";
    };

    this.oDsi.onmouseover = function () {
      that.oFour.style.display = "flex";
    };

    this.oDwu.onmouseover = function () {
      that.oFive.style.display = "flex";
    };

    this.oDliu.onmouseover = function () {
      that.oSix.style.display = "flex";
    };
  }

  mouseout() {
    let that = this;
    this.oLi.onmouseout = function () {
      that.oBox.style.display = "none";
      // this.oLi.style.textDecoration = "none";
    };
    console.log(oBox);

    this.oBox.onmouseout = function () {
      this.oBox.style.display = "none";
      // that.oLi.style.textDecoration = "none";
    };

    this.oDer.onmouseout = function () {
      that.oTwo.style.display = "none";
      // this.oDer.style.textDecoration = "none";
    };

    this.oDsan.onmouseout = function () {
      that.oThree.style.display = "none";
      // this.oDsan.style.textDecoration = "none";
    };

    this.oDsi.onmouseout = function () {
      that.oFour.style.display = "none";
      // this.oDsi.style.textDecoration = "none";
    };

    this.oDwu.onmouseout = function () {
      that.oFive.style.display = "none";
      // this.oDwu.style.textDecoration = "none";
    };

    this.oDliu.onmouseout = function () {
      that.oSix.style.display = "none";
      // this.oDliu.style.textDecoration = "none";
    };
  }
}
